<!--
 * @Author: your name
 * @Date: 2021-08-07 11:45:47
 * @LastEditTime: 2021-08-10 11:49:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-group-ui\src\views\More.vue
-->
<template>
    <div class="more">
       <!-- 头部 -->
       <Header></Header>
       <!-- /头部 -->
       <!-- 体部 -->
       <div class="content">
           <div class="wrapper">
          <!-- 当前位置  -->
          <!-- <div class="head" @click="tojz">当前位置: 晋中&nbsp;&nbsp;>&nbsp;&nbsp;{{name}}</div> -->
          <div class="head" ><a @click="tojz">当前位置：晋中</a>&nbsp;&nbsp;>&nbsp;&nbsp;<a  @click="tomore(this.id,this.name)">{{name}}</a></div>
          <!-- /当前位置  -->
          <!-- 内容 -->
          <div class="content_content">
              <div class="content_div" v-for="i in categorys" :key="i.id" @click="tolist(i.id)">
                <div class="content_title">{{i.title}}</div>
                   <div class="contnt_time">{{i.publishTime | fmtDate}}</div>
                   <el-divider></el-divider>                     
              </div>
          </div>
          <!-- /内容 -->
       </div>
       </div>
       <!-- /体部 -->
       <!-- 底部 -->
       <Footer></Footer>
       <!-- /底部 -->
    </div>
</template>
<script>
import {get} from "../utils/request"
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
    components:{
        Header,
        Footer,
       
    },
    data(){
        return{
            id:'',
            name:'',
            categorys:[],
            aritcle:[],
            loading:false,  
        }
    },
    created(){
        this.id=this.$route.query.id
        this.name=this.$route.query.name
        this.onloadaritcle()
    },
    methods:{
        tojz(){
                this.$router.push({path:'/jz'})
            },
             tomore(id,name){
                this.$router.push({path:'/more',query:{id,name}})
            },
            tolist(id){
                this.$router.push({path:'/jzlist',query:{id}})
            },
            onloadaritcle(){
            // this.loading = true; 
            let url="/index/article/pageQuery"
             get(url,{page:1,pageSize:8,categoryId:this.id})
            .then(res => {
                this.categorys= res.data.list;
            }).finally(()=> {
            this.loading = false;
          })
        },
    }
}
</script>
<style lang="scss" scoped>
.more{
 min-height: 1200px;
.content{
    .wrapper{
       .head{
    background-color: #fafafa;
    color:#999;
    font-size: 12px;
    padding-left: 15px;
    margin: 10px auto 0 auto;
    cursor: pointer;
      }
      .content_content{
         
          .content_div{
               margin-top: 20px;
               cursor: pointer;
            .content_title{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 60px;
                font-size: 20px;
                font-weight: bold;
                line-height: 32px;
                font-family: 微软雅黑;
                color:#000,
          }
          .contnt_time{
            float: right;
            font-size: 14px;
            color: #999;
            margin-bottom: 20px;
          }
          }

      }

    }

}
}     
</style>